<script setup lang="ts">
import { format, getUnixTime, getTime } from 'date-fns'

const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
const timeZoneOffset = `UTC+${0 - new Date().getTimezoneOffset() / 60}`
const timeFormats = shallowRef(getTimeFormats())
let intervalId: ReturnType<typeof setInterval>
onMounted(() => {
  intervalId = setInterval(() => {
    timeFormats.value = getTimeFormats()
  }, 332)
})
onUnmounted(() => clearInterval(intervalId))

function getTimeFormats() {
  const now = new Date()
  return [
    format(now, 'yyyy-MM-dd HH:mm:ss'),
    getUnixTime(now).toString(),
    getTime(now).toString(),
  ]
}
</script>

<template>
  <UCard>
    <template #header>
      Current Times ({{ timeZone }}) {{ timeZoneOffset }}
    </template>
    <ClientOnly>
      <div v-for="(time, index) in timeFormats" :key="index" class="flex justify-between items-center">
        {{ time }}
        <UTooltip text="Copy" :popper="{ placement: 'right' }">
          <UButton
            icon="i-heroicons-clipboard-document"
            size="sm"
            color="primary"
            square
            variant="ghost"
          />
        </UTooltip>
      </div>
    </ClientOnly>
  </UCard>
</template>
